<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>第四节课</title>
		<style type="text/css">
			/*去除原来样式*/
			
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				/*
				 * 将边框设置在中间
				 */
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<canvas id="canvas" width="600" height="600"></canvas>
		</div>
	</body>

	<script>
		
			
		
		let oCanvas = document.getElementById("canvas");
		let pen = oCanvas.getContext("2d");
		
		pen.beginPath();
		pen.lineWidth=20;
		pen.lineCap="butt";
		pen.moveTo(20,20);
		pen.lineTo(20,300);
		pen.stroke();
		pen.closePath();
		
		pen.beginPath();
		pen.lineWidth=20;
		pen.lineCap = "round";
		pen.moveTo(50,20);
		pen.lineTo(50,300);
		pen.stroke();
		pen.closePath();
		
		pen.beginPath();
		pen.lineWidth=20;
		pen.lineCap = "square";
		pen.moveTo(80,20);
		pen.lineTo(80,300);
		pen.stroke();
		pen.closePath();
		
	</script>

</html>